<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>统计</title>
    <meta name="description" content="Free Bootstrap 4 Admin Theme | Pike Admin">
    <!-- Favicon -->
    <link rel="shortcut icon" href="background/images/favicon.ico">
    <!-- Switchery css -->
    <link href="background/plugins/switchery/switchery.min.css" rel="stylesheet" />
    <!-- Bootstrap CSS -->
    <link href="background/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- Font Awesome CSS -->
    <link href="background/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Custom CSS -->
    <link href="background/css/style.css" rel="stylesheet" type="text/css" />
    <!-- BEGIN CSS for this page -->
    <link rel="stylesheet" type="text/css" href="common/css/dataTables.bootstrap4.min.css"/>
    <!--引入adminkit模板-->
    <link href="adminkit/css/app.css" rel="stylesheet">
    <style>
        td.details-control {
            background: url('background/plugins/datatables/img/details_open.png') no-repeat center center;
            cursor: pointer;
        }
        tr.shown td.details-control {
            background: url('background/plugins/datatables/img/details_close.png') no-repeat center center;
        }
    </style>
    <!-- END CSS for this page -->
</head>
<body >
<div class="wrapper">
    <nav id="sidebar" class="sidebar">
        <div class="sidebar-content js-simplebar">
            <a class="sidebar-brand" href="#">
                <span class="align-middle">后台管理</span>
            </a>

            <ul class="sidebar-nav">

                <li class="sidebar-item ">
                    <a class="sidebar-link" th:href="@{/dashboard}">
                        <i class="align-middle" data-feather="sliders"></i> <span class="align-middle">首页</span>
                    </a>
                </li>


                <li class="sidebar-item ">
                    <a class="sidebar-link" href="/publishedArticleManage">
                        <i class="align-middle" data-feather="book"></i> <span class="align-middle">文章管理</span>
                    </a>
                </li>

                <li class="sidebar-item">
                    <a class="sidebar-link" href="/kindManage">
                        <i class="align-middle" data-feather="credit-card"></i> <span class="align-middle">分类管理</span>
                    </a>
                </li>

                <li class="sidebar-item">
                    <a class="sidebar-link" href="/tagManage">
                        <i class="align-middle" data-feather="tag"></i> <span class="align-middle">标签管理</span>
                    </a>
                </li>
                <li class="sidebar-item ">
                    <a class="sidebar-link" th:href="@{/commentManage}">
                        <i class="align-middle" data-feather="message-square"></i> <span class="align-middle">评论管理</span>
                    </a>
                </li>
                <li class="sidebar-item">
                    <a class="sidebar-link" href="/frontInfo">
                        <i class="align-middle" data-feather="airplay"></i> <span class="align-middle">外观管理</span>
                    </a>
                </li>
                <li class="sidebar-item active">
                    <a class="sidebar-link" th:href="@{/statistics}">
                        <i class="align-middle" data-feather="box"></i> <span class="align-middle">统计</span>
                    </a>
                </li>
                <li class="sidebar-item">
                    <a class="sidebar-link" href="/adminInfo">
                        <i class="align-middle" data-feather="user"></i> <span class="align-middle">个人信息管理</span>
                    </a>
                </li>
            </ul>


        </div>
    </nav>
    <div class="main">
        <!-- top bar navigation -->
        <nav class="navbar navbar-expand navbar-light navbar-bg">
            <a class="sidebar-toggle d-flex">
                <i class="hamburger align-self-center"></i>
            </a>
            <a href="/" class="btn btn-outline-info" disabled>返回前台首页</a>

            <div class="navbar-collapse collapse">
                <ul class="navbar-nav navbar-align">
                    <li class="nav-item dropdown">
                        <a class="nav-icon dropdown-toggle" href="#" id="messagesDropdown" data-toggle="dropdown">
                            <div class="position-relative">
                                <i class="align-middle" data-feather="message-square"></i>
                                <span class="indicator" >[[${session.unReadCount}]]</span>
                            </div>
                        </a>
                        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right py-0" aria-labelledby="messagesDropdown">
                            <div class="dropdown-menu-header">
                                <div class="position-relative">
                                    [[${session.unReadCount}]]条新评论
                                </div>
                            </div>
                            <div class="list-group">
                                <a th:href="@{/commentManage}" class="list-group-item" th:each="comment:${session.unReadComment}">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col-2">
                                            <i class="text-danger" data-feather="alert-circle"></i>
                                        </div>
                                        <div class="col-10">
                                            <div class="text-dark">[[${comment.name}]]</div>
                                            <div class="text-muted small mt-1">[[${comment.content}]]</div>
                                            <div class="text-muted small mt-1">[[${ #dates.format(comment.time,'yyyy年MM月dd日 ')}]]</div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="dropdown-menu-footer">
                                <a th:href="@{/commentManage}" class="text-muted">所有评论</a>
                            </div>
                        </div>
                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-icon dropdown-toggle d-inline-block d-sm-none" href="#" data-toggle="dropdown">
                            <i class="align-middle" data-feather="settings"></i>
                        </a>

                        <a class="nav-link dropdown-toggle d-none d-sm-inline-block" href="#" data-toggle="dropdown" >
                            <img th:src="${session.admin.img}" class="avatar img-fluid rounded mr-1"  th:alt="${session.admin.name}"/> <span class="text-dark">[[${session.admin.name}]]</span>                        </a>
                        <div class="dropdown-menu dropdown-menu-right">
                            <a class="dropdown-item" href="/logout">Log out</a>
                        </div>
                    </li>
                </ul>
            </div>
        </nav>

        <div class="content-page" style="margin: 0px">

            <!-- Start content -->
            <div class="content">

                <div class="container-fluid">

                    <div class="row">
                        <div class="col-xl-12">
                            <div >
                                <h1 class="main-title float-left">
                                    统计&ensp;
                                </h1>

                            </div>
                        </div>
                    </div>
                    <!-- end row -->

                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <div class="card flex-fill w-100">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">10天内访问统计</h5>
                                </div>
                                <div class="card-body py-3">
                                    <div class="chart chart-sm">
                                        <canvas id="chartjs-dashboard-line"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 col-md-6 col-xxl-3 d-flex order-2 order-xxl-3">
                            <div class="card flex-fill w-100">
                                <div class="card-header">
                                    <h5 class="card-title">标签文章阅读量统计</h5>
                                </div>
                                <div class="card-body">
                                    <div class="chart chart-sm">
                                        <canvas id="chartjs-pie"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-md-12 col-xxl-6 d-flex order-3 order-xxl-2">
                            <div class="card flex-fill w-100">
                                <div class="card-header">
                                    <h5 class="card-title">分类文章阅读量统计</h5>
                                </div>
                                <div class="card-body">
                                    <div class="chart chart-sm">
                                        <canvas id="chartjs-doughnut"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-md-6 col-xxl-3 d-flex order-1 order-xxl-1">
                            <div class="card flex-fill">
                                <div class="card-header"><h5><i class="fa fa-eye"></i> 访问概况</h5></div>
                                <div class="card-body">
                                    <table class="table table-responsive-xl">
                                        <thead>
                                        <tr>
                                            <th scope="col"></th>
                                            <th scope="col" width="25%">访问</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <th scope="row">最近7天 (周) ：</th>
                                            <td class="num counter" th:text="${map.get('week')}"></td>
                                        </tr>
                                        <tr>
                                            <th scope="row">最近30天 (月) ：</th>
                                            <td class="num counter" th:text="${map.get('month')}"></td>
                                        </tr>
                                        <tr>
                                            <th scope="row">最近365天 (年) ：</th>
                                            <td class="num counter" th:text="${map.get('year')}"></td>
                                        </tr>
                                        <tr>
                                            <th scope="row">总计：</th>
                                            <td class="num counter" th:text="${map.get('total')}"></td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                        </div>

                    </div>

                </div>
                <!-- END container-fluid -->

            </div>
            <!-- END content -->

        </div>

    </div>
</div>

<!-- END main -->
<!--引入adminkit模板-->
<script src="adminkit/js/app.js"></script>

<script src="background/js/modernizr.min.js"></script>
<script src="background/js/jquery.min.js"></script>
<script src="background/js/moment.min.js"></script>

<script src="background/js/popper.min.js"></script>
<script src="background/js/bootstrap.min.js"></script>

<script src="background/js/detect.js"></script>
<script src="background/js/fastclick.js"></script>
<script src="background/js/jquery.blockUI.js"></script>
<script src="background/js/jquery.nicescroll.js"></script>
<script src="background/js/jquery.scrollTo.min.js"></script>
<script src="background/plugins/switchery/switchery.min.js"></script>

<!-- App js -->
<script src="background/js/pikeadmin.js"></script>

<!-- BEGIN Java Script for this page -->
<script src="common/js/jquery.dataTables.min.js"></script>
<script src="common/js/dataTables.bootstrap4.min.js"></script>
<script src="common/js/sweetalert.min.js"></script>
<script src="common/js/common.js"></script>

<script type="text/javascript">
    //解决下拉菜单不显示
    $(function () {
        $('.dropdown-toggle').dropdown();
    })
    // START CODE FOR BASIC DATA TABLE



</script>
<script>
    $(function() {
        var ctx = document.getElementById('chartjs-dashboard-line').getContext("2d");
        var gradient = ctx.createLinearGradient(0, 0, 0, 225);
        gradient.addColorStop(0, 'rgba(215, 227, 244, 1)');
        gradient.addColorStop(1, 'rgba(215, 227, 244, 0)');
        // Line chart
        new Chart(document.getElementById("chartjs-dashboard-line"), {
            type: 'line',
            data: {
                labels: [(${statisticsDateList})],
                datasets: [{
                    label: "访问量",
                    fill: true,
                    backgroundColor: gradient,
                    borderColor: window.theme.primary,
                    data: [(${statisticsCountList})]
                }]
            },
            options: {
                maintainAspectRatio: false,
                legend: {
                    display: false
                },
                tooltips: {
                    intersect: false
                },
                hover: {
                    intersect: true
                },
                plugins: {
                    filler: {
                        propagate: false
                    }
                },
                scales: {
                    xAxes: [{
                        reverse: true,
                        gridLines: {
                            color: "rgba(0,0,0,0.0)"
                        }
                    }],
                    yAxes: [{
                        ticks: {
                            stepSize: 1000
                        },
                        display: true,
                        borderDash: [3, 3],
                        gridLines: {
                            color: "rgba(0,0,0,0.0)"
                        }
                    }]
                }
            }
        });
    });
</script>
<script>
    function rgba(a){
        var r = Math.floor(Math.random()*256);
        var g = Math.floor(Math.random()*256);
        var b = Math.floor(Math.random()*256);
        var rgba = 'rgba('+r+','+g+','+b+','+a+')';
        return rgba;
    }
    var size=[[${kindCount}]];
    var bgColorlist1 = [];
    for(let i=0;i<size;i++){
         bgColorlist1 = bgColorlist1.concat(rgba(200));
    }
    $(function() {
        // Doughnut chart
        new Chart(document.getElementById("chartjs-doughnut"), {
            type: "doughnut",
            data: {
                labels: [(${kindNameList})],
                datasets: [{
                    data: [(${kindArticleReadCount})],
                    backgroundColor:bgColorlist1,
                    borderColor: "transparent"
                }]
            },
            options: {
                maintainAspectRatio: false,
                cutoutPercentage: 65,
                legend: {
                    display: false
                }
            }
        });
    });
</script>
<script>
    function rgba(a){
        var r = Math.floor(Math.random()*256);
        var g = Math.floor(Math.random()*256);
        var b = Math.floor(Math.random()*256);
        var rgba = 'rgba('+r+','+g+','+b+','+a+')';
        return rgba;
    }
    var size=[[${tagCount}]];
    var bgColorlist = [];
    for(let i=0;i<size;i++){
        bgColorlist = bgColorlist.concat(rgba(200));
    }
    $(function() {
        // Pie chart
        new Chart(document.getElementById("chartjs-pie"), {
            type: "pie",
            data: {
                labels: [(${tagNameList})],
                datasets: [{
                    data: [(${tagArticleReadCount})],
                    backgroundColor: bgColorlist,
                    borderColor: "transparent"
                }]
            },
            options: {
                maintainAspectRatio: false,
                legend: {
                    display: false
                }
            }
        });
    });
</script>
<!-- END Java Script for this page -->

</body>
</html>